<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 打印样式是必须的，你可以调整成自由链接， 注意名称 print-lock.css -->
    <link rel="stylesheet" type="text/css" media="print" href="./css/print-lock.css" />
    <!-- 下列使用的都是 unpkg提供的 稳定性未知, 建议下载自行处理  -->
    <!-- jquery 必须 -->
    <script src="./js/jquery.js"></script>
    <!-- 条形码 -->
    <script src="./js/JsBarcode.all.min.js"></script>
    <!-- 颜色选择器 -->
    <script src="./js/jquery.minicolors.min.js"></script>
    <!-- 直接打印(print2)需要 -->
    <script src="./js/socket.io.min.js"></script>
    <!-- toPdf需要 -->
    <script src="./js/umd.js"></script>
    <script src="./js/jspdf.umd.min.js"></script>
    <script src="./js/html2canvas.js"></script>
    <!-- vue-plugin-hiprint -->
    <script src="./js/vue-plugin-hiprint.js"></script>

    <link href="//cdn.staticfile.net/layui/2.9.14/css/layui.css" rel="stylesheet">
    <script src="//cdn.staticfile.net/layui/2.9.14/layui.js"></script>

    <style>
        /* 添加按钮样式 */
        input[type="button"] {
            background-color: #007bff;
            border: none;
            color: white;
            padding: 5px 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 10px;
            font-weight: bold;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s;
            width: 100px; /* 设置按钮宽度 */
            height: 40px; /* 设置按钮高度 */
        }

        input[type="button"]:hover {
            background-color: #0056b3;
        }

        body{
            background: #e9e9e9;
        }
        #app{
            padding-top: 10px;
            padding-left: 10px;
            padding-right: 10px;
            padding-bottom: 30px;
        }
        .hiprint-printTemplate{
            background: #ffffff;
            box-shadow:0 0 10px #000;
        }
        .hiprint-printPaper{
            border: 1px dashed #000;
        }
    </style>
</head>
<body  topmargin="0" bottommargin="0" rightmargin="0" leftmargin="0" style="height: 100%;text-align: center;">

<div id="app" >
    <input type="button" onclick="toPdf()" value="转换成PDF" />
    <input type="button" onclick="printWithHiprint()" value="浏览器打印"/>
    <input type="button" onclick="" style="display: none" value="直接打印"/>

    <div id="preview_content_design" style="display: flex; flex-direction: column; align-items: center;">

    </div>
</div>

<script>
    function get(url){
        var temp ;
        $.ajax({
            url: url,
            type: 'GET',
            async: false,
            data: {},
            success: function(response) {
                // 请求成功时的回调函数
                console.log(response);
                temp = response;
            },
            error: function(xhr, status, error) {
                // 请求失败时的回调函数
                console.error(error);
            }
        });
        return temp;
    }

    var printTemplate = get('json/考生抽签模板.json');
    var printData = get('json/考生抽签打印数据.json');
    var fileName="打印pdf文件";

    //屏蔽socket
    var autoConnect = window['vue-plugin-hiprint'].autoConnect,
         disAutoConnect = window['vue-plugin-hiprint'].disAutoConnect,
         defaultElementTypeProvider = window['vue-plugin-hiprint'].defaultElementTypeProvider;
    disAutoConnect()

    //渲染html
    var hiprintTemplate = new hiprint.PrintTemplate({ template: printTemplate });
    $('#preview_content_design').html(
        hiprint.getHtml({
            templates: [
                { template: hiprintTemplate, data: printData }
            ]
        })
    );

    /**
     * 打印预览
     */
    function printWithHiprint() {
        hiprint.print({
            templates: [
                { template: hiprintTemplate, data: printData }
            ]
        });
    }

    /**
     * pdf打印
     */
    function toPdf(){
        // <!-- scale 越大 pdf 越清晰，文件越大  默认2,建议谷歌浏览器使用-->
        hiprintTemplate.toPdf(printData,fileName,{scale:2 });
    }

    layui.use(function(){
        var util = layui.util;
        // 自定义固定条
        util.fixbar({
            bars: [{
                type: 'edit',
                icon: 'layui-icon-edit',
                style: 'background-color: #007bff;'
            }],
            on: {
                mouseenter: function(type){
                    var msg = "";
                    if(type === 'edit'){
                        msg = "编辑"
                    }else if(type === 'top'){
                        msg = "置顶"
                    }
                    layer.tips(msg, this, {
                        tips: 4,
                        fixed: true
                    });
                },
                mouseleave: function(type){
                    layer.closeAll('tips');
                }
            },
            click: function(type){
                console.log(this, type);
                // layer.msg(type);
            }
        });
    });
</script>

</body>
